<template>
  <div class="MVdetail" >
    <i class="fa fa-angle-left" @click="back"></i>
    <video controls="controls" autoplay muted="muted" :src="MvurlLst">
      <!-- <source :src="MvurlLst" type="video/mp4" /> -->
    </video>
    <!-- mv信息 -->
    <div class="GesInfo">
       <img :src="artLIst.img1v1Url"> 
       <div class="inf">
         <p class="name">{{Mvinfo.artistName}}</p>
         <p class="count">{{artLIst.publishTime|date}}</p>
       </div>
    </div>
    <div class="MVinfo">
      <p class="name">{{Mvinfo.name}}</p>
      <span class="count">{{Mvinfo.playCount|formatch}}</span><span class="time">{{Mvinfo.publishTime}}</span>
    </div>
    <div class="like">
      <span><i class="iconfont icon-dianzan" @click.once="Mvinfo.likeCount++"></i>{{Mvinfo.likeCount}}</span>
      <span><i class="fa fa-heart-o" @click.once="Mvinfo.subCount++"></i>{{Mvinfo.subCount}}</span>
      <span><i class="fa fa-share-square-o"></i>转发</span>
    </div>
    <div class="commlis">相关列表</div>
    <!-- 评论列表 -->
    <div class="commentList">
      <ul class="comments">
        <li v-for="(item,index) in showMccommlist" :key="index" >
          <div class="left"><img :src="item.user.avatarUrl"></div>
          <div class="right">
            <p class="CommnetName">{{item.user.nickname}}</p>
            <p class="Comments">{{item.content}}</p>
            <p class="CommentDate">{{item.time|date}}</p>
          </div>
        </li>
      </ul>
    </div>
    <p class="loadermore" @click = 'loadermore' ref='nomore' >加载更多</p>
  </div>
</template>
<script>
export default {
   props:['id','aid','playmusice'],
   data(){
     return{
       Mvinfo:[],
       MvurlLst:'',
       artLIst:[],
       MvcommLIst:[],
       showMccommlist:[],
       limit:10,
       showLoading:"true",
     }
   },
   created(){
     this.$emit('pause');
    //  获取mv信息
     this.$http.get('/mv/detail',{
       params:{
         mvid:this.id
       }
     }).then(d=>{
       this.Mvinfo = d.data.data
       console.log('mv信息',this.Mvinfo);
     })


    //  歌手信息
     this.$http.get('/artists/detail',{
       params:{
         id:this.aid
       }
     }).then(d=>{
       this.artLIst = d.data.artist,
       console.log('歌手信息',d.data.artist);
     })

     
    //  获取mv地址
     this.$http.get('/mv/url',{
       params:{
         id:this.id
       }
     }).then(d=>{
       this.MvurlLst = d.data.data.url;
      //  console.log('mv地址',this.MvurlLst);
     })

    //  获取mv评论列表
    this.$http.get("/comment/mv",{
      params:{
        id:this.id
      }
    }).then(d=>{
      // console.log(d.data);
      let hotComment = d.data.hotComments;
      // console.log(hotComment);
      let comments = d.data.comments
      // console.log(comments);
      let result = []
      result = result.concat(hotComment,comments)
      this.MvcommLIst = result;

      this.showMccommlist = this.MvcommLIst.slice(0,this.limit)
      this.showLoading = false
      console.log('mv评论',this.MvcommLIst);
    })
   },
   methods:{
     back(){
       this.$router.go(-1)
     },
     loadermore(){
      this.showLoading = true;
      let num = this.showMccommlist.length + this.limit;
      this.showMccommlist = this.MvcommLIst.slice(0,num);
      this.showLoading = false
      if(this.showMccommlist.length >= this.MvcommLIst.length){
        this.$refs.nomore.innerHTML = '没有更多数据了'
      }
   },
   },
   filters:{
     date(value){
      let d = new Date(value)
      let years = d.getFullYear();
      let months = (d.getMonth()+1)<10?'0'+(d.getMonth()+1):(d.getMonth()+1)
      let days = d.getDay()
      let Hours = d.getHours()<10?'0'+d.getHours():d.getHours();
      let minutes = d.getMinutes()<10?'0'+d.getMinutes():d.getMinutes();
      return  years+'年'+months+'月'+ days +'日' +' '+ Hours + ':' +minutes;
    },

     formatch(value){
       return (value / 10000).toFixed(1)+'万次播放'
     },
   }
   
}
</script>
<style lang="less" scoped>
.MVdetail{
  margin-top: -124px;
  position: relative;
  .fa-angle-left{
    position: absolute;
    top: 0px;
    left: 0px;
    display: block;
    font-size: 30px;
    color:#fff;
    z-index: 10;
  }
  video{
    width: 100%; 
  }

  .GesInfo{
    display: flex;
    padding: 5px 10px;
    img{
      width: 50px;
      height: 50px;
      border-radius: 50%;
    }
    .inf{
      padding-left: 20px;
      .name{
        font-size: 18px;
        color: #333;
        font-weight: 400;
      }
      .count{
        margin-top: 8px;
        color: #c7c2c2;
        font-size: 14px
      }
    }
  }
  .MVinfo{
    padding: 5px 10px 5px 16px;
    .name{
      font-size: 20px;
    }
    .count{
      font-size: 13px;
      color: #c7c2c2;
    }
    .time{
      font-size: 13px;
      color: #c7c2c2;
      margin-left: 10px;
    }
  }
  .like{
    display: flex;
    line-height: 45px;
    justify-content: space-around;
    align-items: center;
    span{
      flex: 1;
      text-align: center;
      i{
        margin-right: 5px;
      }
    }
  }
  .commlis{
    font-size: 12px;
    height: 24px;
    line-height: 24px;
    padding: 0px 10px;
    background-color: #eeeff0
  }
  .commentList{
  .comments{
    li{
      display: flex;
      padding: 0px 10px;
      .left{
        width: 34px;
        width: 38px;
        height: 34px;
        /* margin: 0px 10px; */
        margin: 10px 10px 0px 0px;
        img{
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      .right{
          width: 100%;
          border-bottom: 1px solid #F4F4F4;
          padding: 10px 0px;
        .CommnetName{
          font-size: 14px;
          color: #666;
          line-height: 20px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap
        }
        .CommentDate{
          font-size: 9px;
          color: #999;
          margin-top: 4px;
        }
        .Comments{
          color: #333;
          font-size: 13px;
          line-height: 22px;
         

        }
       
      }
    }
  }
}
.loadermore{
    text-align: center;
    width: 90%;
    line-height: 40px;
    margin: 0 auto;
    color: #dd001b;
    border: 1px solid #dd001b;
    border-radius: 20px;
    cursor: pointer;
}
}
</style>